<template>
	<view class="page">
		<u--form labelPosition="left" labelWidth="220rpx" ref="form" :model="form" :rules="formRules">
			<u-gap height="32rpx" bgColor="transparent"></u-gap>
			<view class="form-card-title">个人信息</view>
			<view class="card-container">
				<u-form-item label="姓名" prop="doctorName" borderBottom required>
					<u--input v-model="form.doctorName" border="none" placeholder="请填写姓名"></u--input>
				</u-form-item>
				<u-form-item label="身份证" prop="doctorIdcard" borderBottom required>
					<u--input v-model="form.doctorIdcard" border="none" placeholder="请填写身份证"
						@change='calAge'></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="doctorGender" borderBottom required>
					<u-radio-group v-model="form.doctorGender" placement="row">
						<u-radio :customStyle="{marginRight: '16px'}" label="男" :name="1"></u-radio>
						<u-radio :customStyle="{marginRight: '8px'}" label="女" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="年龄" prop="doctorAge" borderBottom required>
					<u--input v-model="form.doctorAge" border="none" placeholder="请填写身份证" type='number'></u--input>
				</u-form-item>
				<u-form-item label="村医信用社卡号" prop="bankCardNumber" borderBottom required>
					<u--input v-model="form.bankCardNumber" border="none" placeholder="请填写村医设卡号"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="doctorPhone" borderBottom required>
					<u--input v-model="form.doctorPhone" border="none" placeholder="请填写手机号" type='number'></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="doctorPassword" borderBottom required>
					<u--input v-model="form.doctorPassword" border="none" placeholder="请填写密码"></u--input>
				</u-form-item>

			</view>
			<u-gap height="32rpx" bgColor="transparent"></u-gap>
			<view class="form-card-title">证件信息</view>
			<view class="card-container">
				<u-form-item label="机构代码" prop="orgCode" borderBottom required>
					<u--input v-model="form.orgCode" border="none" placeholder="请填写机构代码"></u--input>
				</u-form-item>

				<u-form-item label="机构名称" prop="orgName" borderBottom required>
					<u--input v-model="form.orgName" border="none" placeholder="请填写卫生室名"></u--input>
				</u-form-item>
				<u-form-item label="所属区县" prop="countyName" @click="countyNameShow=true" borderBottom required>
					<view class="input-text" :class="{'placeholder-color': !form.countyName}">
						{{form.countyName?form.countyName:'请选择区县'}}
					</view>
					<u-picker :show="countyNameShow" :columns="countyNameColumns" :closeOnClickOverlay='true'
						keyName="name" @confirm='countyNameConfirm' @close='countyNameShow=false'
						@cancel='countyNameShow=false'></u-picker>
				</u-form-item>
				<u-form-item v-if="form.countyName==='朝阳县'" label="所属乡镇" prop="townCode" @click="townCodeShow=true"
					borderBottom required>
					<view class="input-text" :class="{'placeholder-color': !townName}">{{townName?townName:'请选择乡镇'}}
					</view>
					<u-picker :show="townCodeShow" :columns="townCodeColumns" :closeOnClickOverlay='true'
						keyName="dictName" @confirm='townNameConfirm' @close='townCodeShow=false'
						@cancel='townCodeShow=false'></u-picker>
				</u-form-item>
				<u-form-item v-if="form.countyName==='朝阳县'" label="所属村" prop="villageName" @click="villageNameShow=true"
					borderBottom required>
					<u--input v-model="form.villageName" border="none" placeholder="请填写所属村"></u--input>
					<!-- <view class="input-text" :class="{'placeholder-color': !form.villageName}">
						{{form.villageName?form.villageName:'请选择村'}}
					</view>
					<u-picker :show="villageNameShow" :columns="villageNameColumns" :closeOnClickOverlay='true'
						keyName="name" @confirm='villageNameConfirm' @close='villageNameShow=false'
						@cancel='villageNameShow=false'></u-picker> -->
				</u-form-item>
				<u-form-item label="是否法人本人" borderBottom required>
					<u-radio-group v-model="isflag" placement="row">
						<u-radio :customStyle="{marginRight: '16px'}" label="是" :name="1"></u-radio>
						<u-radio :customStyle="{marginRight: '8px'}" label="否" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="isflag===2" label="法人" prop="legalRepresentative;" borderBottom required>
					<u--input v-model="form.legalRepresentative" border="none" placeholder="请填写法人"></u--input>
				</u-form-item>
				<u-form-item v-if="isflag===2" label="法人电话" prop="representativePhoneNumber" borderBottom required>
					<u--input v-model="form.representativePhoneNumber" border="none" placeholder="请填写电话"
						type='number'></u--input>
				</u-form-item>

				<u-form-item label="证件照片" prop="permitPhoto" borderBottom required>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</u-form-item>
			</view>
		</u--form>
		<view class="button-group-list">
			<view class="save-button">
				<u-button @click="onSubmit" type="primary" text="保存" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config'
	import {
		signup,
		operateDiction
	} from '../../common/api/register/register';
	import {
		validateIdCard,
		getInfoFromIdCard
	} from '@/util/utils.js'
	export default {
		data() {
			return {
				fileList1: [],
				isflag: null,
				form: {
					doctorName: '',
					doctorGender: '',
					doctorIdcard: '',
					doctorAge: '',
					doctorPhone: '',
					orgCode: '',
					permitPhoto: '',
					orgName: '',
					legalRepresentative: '',
					representativePhoneNumber: '',
					doctorPassword: '',
					bankCardNumber: '',
					countyName: '',
					townCode: '',
					villageName: '',
				},
				formRules: {
					doctorName: [{
						required: true,
						message: '请输入患者姓名',
						trigger: ['blur', 'change']
					}],
					doctorGender: [{
						type: 'number',
						required: true,
						message: '请选择患者性别',
						trigger: ['blur', 'change']
					}],
					doctorIdcard: [{
							type: 'number',
							required: true,
							message: '请输入身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (value && !validateIdCard(value)) {
									return false;
								}
								return true;
							},
							required: true,
							message: '请输入正确的身份证号码',
							trigger: ['blur', 'change']
						}
					],
					doctorAge: [{
						type: 'number',
						required: true,
						message: '请输入年龄',
						trigger: ['blur', 'change']
					}],
					bankCardNumber: [{
						type: 'number',
						required: true,
						message: '请输入信用社卡号',
						trigger: ['blur', 'change']
					}],
					doctorPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					doctorPassword: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					orgCode: [{
						required: true,
						message: '请输入机构代码',
						trigger: ['blur', 'change']
					}],
					orgName: [{
						required: true,
						message: '请输入机构名称',
						trigger: ['blur', 'change']
					}],
					countyName: [{
						required: true,
						message: '请选择区县',
						trigger: ['blur', 'change']
					}],
					townCode: [{
						required: true,
						message: '请选择乡镇',
						trigger: ['blur', 'change']
					}],
					villageName: [{
						required: true,
						message: '请选择村',
						trigger: ['blur', 'change']
					}],
					legalRepresentative: [{
						required: true,
						message: '请输入法人姓名',
						trigger: ['blur', 'change']
					}],
					representativePhoneNumber: [{
							required: true,
							message: '请输入法人电话',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					permitPhoto: [{
						required: true,
						message: '请上传照片',
						trigger: ['blur', 'change']
					}]
				},
				townName: "",
				countyNameShow: false,
				townCodeShow: false,
				villageNameShow: false,
				countyNameColumns: [
					[{
						name: '朝阳县',
						code: '211321'
						// ...
					}, {
						name: '龙城区',
						code: ''
					}, {
						name: '双塔区',
						code: ''
					}]
				],
				townCodeColumns: [],
				villageNameColumns: []
			};
		},
		onLoad() {
			this.getareaList()
		},
		methods: {
			getareaList() {
				// 获取乡镇列表
				operateDiction({
					search_EQ_parentType: 'KBA_DICT_XZQH'
				}).then(res => {
					if (res.code === 1) {
						this.townCodeColumns = [res.object];
					}
				})
			},
			// 通过身份证计算年龄和性别
			calAge(value) {
				this.$refs.form.validateField('idcard', (res) => {
					if (!res[0]?.message) {
						if (!value) {
							this.form.doctorAge = '';
							this.form.doctorGende = null
							return;
						}
						const idCardInfo = getInfoFromIdCard(value);
						if (idCardInfo) {
							this.form.doctorAge = idCardInfo.age;
							this.form.doctorGender = idCardInfo.gender
						}
					}
				})

			},
			// 区县确认按钮
			countyNameConfirm(e) {
				this.form.countyName = e.value[0].name
				this.countyNameShow = false
				this.townName = ''
				this.form.villageName=''
				this.form.townCode=''
			},
			// 乡镇确认按钮
			townNameConfirm(e) {
				this.form.villageName = ''
				this.townName = e.value[0].dictName
				this.form.townCode = e.value[0].dictType
				this.townCodeShow = false

			},
			// 村确认按钮
			// villageNameConfirm(e) {
			// 	this.form.villageName = e.value[0].name
			// 	this.villageNameShow = false
			// },
			onSubmit() {
				// 表单验证
				this.$refs.form.validate().then(valid => {
					if (valid) {

						if (this.isflag === 1) {
							this.form.representativePhoneNumber = this.form.doctorPhone
							this.form.legalRepresentative = this.form.doctorName
						}
						// this.form.permitPhoto = this.fileList1[0] ? config.baseUrl+this.fileList1[0].url : ''
						signup(this.form).then(res => {
							if (res.code == 1) {

								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000);
							}
							uni.showToast({
								title: res.message,
								duration: 2000
							});
						})
					}
				});


			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "/ygt-api/file/addFileSignUp",
						filePath: url,
						name: "file",
						success: (res) => {
							const data = JSON.parse(res.data)
							this.form.permitPhoto = data.message
							resolve(config.imgURl+data.message);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 0 calc(64rpx + 120rpx + env(safe-area-inset-bottom)) 0;
		box-sizing: border-box;
	}

	.form-card-title {
		padding: 0 42rpx 16rpx;
		font-size: $ft-size-md;
		color: $text-desc-color;
	}

	.card-container {
		padding: 0 20rpx;

		u-form-item {
			margin-left: 20rpx;
		}
	}

	.button-group-list {
		position: fixed;
		left: 32rpx;
		bottom: calc(32rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 686rpx;
		height: 100rpx;
		border-radius: 1000rpx;
		background-color: #fff;
		box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.05);
		z-index: 10;

		.save-button {
			width: 100%;
		}
	}
</style>